﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
	    //工具栏
	    var toolbar = [
	        {
	        text: '修改',
	        iconCls: 'icon-edit',
	        handler: function () {
                let row =  $("#booklist").datagrid("getSelected");
                $("#username").textbox("setValue",row.username);
                $("#phone").textbox("setValue",row.phone);
                $("#email").textbox("setValue",row.email);
                $("#interest").textbox("setValue",row.interest);
                $('#dd').dialog('open');
	        }
	    }, '-', {
	        text: '启用',
	        iconCls: 'icon-ok',
	        handler: function () {
                let row =  $("#booklist").datagrid("getSelected");
                $.ajax({
                    url:"/manager/user/updateToOpen",
                    async:false,
                    type:"post",
                    dataType:"json",
                    data:{
                        "id":row.id,
                        "flag":row.flag
                    },
                    success:function () {
                        $("#booklist").datagrid("load");
                    }
                });
            }
	    }, '-', {
	        text: '禁用',
	        iconCls: 'icon-cancel',
	        handler: function () {
                let row =  $("#booklist").datagrid("getSelected");
                $.ajax({
                    url:"/manager/user/updateToClose",
                    async:false,
                    type:"post",
                    dataType:"json",
                    data:{
                        "id":row.id,
                        "flag":row.flag
                    },
                    success:function () {
                        $("#booklist").datagrid("load");
                    }
                });
            }
	    }
	    ];
	   $(function(){
	       $('#booklist').datagrid({  
				title:'用户列表',  
				iconCls:'icon-save',   
				url:'/manager/user/findAll',
				columns:[
				    [
					{field:'username',title:'姓名',width:100,align:'center'},
					{field:'phone',title:'电话',width:200,align:'center'},
					{field:'interest',title:'爱好',width:100,align:'interest'},
                    {field:'email',title:'email',width:200,align:'center'},
					{field:'user.flag',title:'状态',width:100,align:'center',formatter:function (value,row,index){
                            return row.flag==1?"开启":"禁用";
                        }}
					]
                ],
				toolbar: toolbar,  
				pagination: true,//表示在datagrid设置分页              
               	pageSize: 5,
				singleSelect:true,
                pageList: [5,10,20]
			});

		 //初始化查询栏
		 $("#submit_search").linkbutton({ iconCls: 'icon-search', plain: true })
            .click(function () {
                $('#booklist').datagrid("load",{
                    username: $("#name").textbox("getValue"),
                    flag:$("#search_type").val()
                });
            });
          
          //初始化修改窗口  
         $('#dd').dialog({
			    title: 'My Dialog',
			    width: 700,
			    height: 500,
			    closed: true,
			    cache: false,
			    modal: true,
			    iconCls: 'icon-save',
                buttons: [
                    {
                    text:'提交',
                    iconCls:'icon-ok',
                    handler:function(){
                        let row =  $("#booklist").datagrid("getSelected");
                        $.ajax({
                            url:"/manager/user/updateUser",
                            async:false,
                            type:"post",
                            dataType:"json",
                            data:{
                                "id":row.id,
                                "username":$("#username").textbox("getValue"),
                                "phone":$("#phone").textbox("getValue"),
                                "email":$("#email").textbox("getValue"),
                                "interest":$("#interest").textbox("getValue"),
                                "password":row.password,
                                "flag":row.flag
                            },
                            success:function (callback) {
                                $("#booklist").datagrid("load");
                                $('#dd').dialog("close");
                            }
                        });
                    }
                },{
                    text:'关闭',
                    handler:function(){
                        $('#dd').dialog("close");
                    }
                }
                ]
			});
	   });



	</script>
</head>
<body>
   <form name="searchform" method="post" action="/manager/user/selectBy" id ="searchform">
    <td width="70" height="30"><strong>用户查询：</strong></td>
    <td height="30">
        <input class="easyui-textbox" type="text" name="keyword" size=20 placeholder="姓名" id="name"/>
        <select name="search_type" id="search_type" >
            <option value="-1">请选择状态</option>
            <option value="1" >开启</option>
            <option value="2">禁用</option>
        </select>
    </td>
	<td>
	  <a id="submit_search">搜索</a>
	</td>
  </form>

  <table id="booklist"></table>
    <div id="dd">
           <div align="center" style="margin-top: 30px">
            <form id="ff" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" id="username" name="username" style="width:50%" data-options="label:'姓名:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" id="phone" name="phone" style="width:50%" data-options="label:'电话:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" id="email" name="email" style="width:50%" data-options="label:'email:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" id="interest" name="interest" style="width:50%;height:60px" data-options="label:'兴趣爱好:',multiline:true">
            </div> 
            </form>
           </div>
    </div>

</body>
</html>